<template>
    <div>
      <el-table :data="tableData" >
      <el-table-column align="center" label="商户变动金额"  prop="balance"/>
      <el-table-column align="center" label="变动时间"  prop="gmtCreate"/>
      <el-table-column align="center" label="余额变动类型" prop="recordType"/>
      <el-table-column align="center" label="余额变动类型名称"  prop="recordTypeName"/>
      <!-- <el-table-column align="center" label="余额变动数据关联ID" prop="relationId" /> -->
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getRecordPage"
    />

    </div>
</template>

<script setup>
import { recordPage } from '@/api/userManagement'
import { onMounted, watch } from 'vue';

const props= defineProps({
  merchantNo:{
    required: true,
  }
})
const total=ref(0)
const queryParams= ref({
    endTime:'',
    startTime:'',
    pageNum: 1,
    pageSize: 10,
    fromTypeList: [],
    merchantNoList: [props.merchantNo],
})

const tableData=ref([]);
function getRecordPage() {
  recordPage(queryParams.value).then((res) => {
    const { total: totalNum, data } = res.data
    total.value=totalNum
    tableData.value=data
    
})
}
getRecordPage()
watch(()=>props.merchantNo,()=>{
  getRecordPage()
})
</script>

<style scoped>

</style>